/**
 * 可视化展示
 */
Ext.define('Module.sjfx.Kshzs', {
	extend : 'Ext.panel.Panel',
	layout: 'border',
	border: true,
	initComponent : function() {
		var me = this;
		me.on("boxready",function(){
			me.updatePanel(null);
		});
		
		var chartBingStore=Ext.create('Ext.data.Store',{
			autoLoad: true,
			fields: ['name', 'data','todayCount','weekCount','monthCount'],
			 proxy: {
		            type: 'ajax',
		            url: 'sjfx/KshzsAction/getKshzsBingCount.do'
	        }
		});
		
		/**
		 * 任务总数
		 */
		var chartBing = Ext.create('Ext.chart.Chart', {
		    width: 300,
		    height: 230,
		    animate: true,
		    store: chartBingStore,
		    theme: 'Base:gradients',
		    series: [{
		        type: 'pie',
		        angleField: 'data',
		        showInLegend: true,
		        tips: {
		            trackMouse: true,
		            renderer: function(storeItem, item) {
		                var total = 0;
		                chartBingStore.each(function(rec) {
		                    total += rec.get('data');
		                });
		                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
		            }
		        },
		        highlight: {
		            segment: {
		                margin: 20
		            }
		        },
		        label: {
		            field: 'name',
		            display: 'rotate',
		            contrast: true,
		            font: '18px Arial',
		            hideLessThan: 18
		        }
		    }]
		});
		
		
		

			var chartZhuZhuangStore=Ext.create('Ext.data.Store',{
				autoLoad: true,
				fields: ['name', '未完成','已完成'],
				 proxy: {
			            type: 'ajax',
			            url: 'sjfx/KshzsAction/getKshzsZhuZhuangCount.do'
		        }
			});
			/**
			 * 完成率
			 */
		    var chartZhuZhuang = Ext.create('Ext.chart.Chart', {
		        title:"完成数",
		        width: '100%',
                height: '100%',
		        animate: true,
		        store: chartZhuZhuangStore,
		        legend: {
		            position: 'right'
		        },
		        axes: [
		            {
		                type: 'Numeric',
		                position: 'left',
		                fields: ['未完成','已完成'],
		                label: {
		                    renderer: Ext.util.Format.numberRenderer('0,0')
		                },
		                title: '完成数分析',
		                grid: true,
		                minimum: 0
		            },
		            {
		                type: 'Category',
		                position: 'bottom',
		                fields: ['name']
		            }
		        ],
		        series: [
		            {
		                type: 'column',
		                axis: 'left',
		                highlight: true,
		               /* tips: {
		                  trackMouse: true,
		                  width: 140,
		                  height: 28,
		                  renderer: function(storeItem, item) {
		                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('未完成') + ' $');
		                  }
		                },*/
		                label: {
		                  display: 'insideEnd',
		                  'text-anchor': 'middle',
		                    field: ['未完成','已完成'],
		                    renderer: Ext.util.Format.numberRenderer('0'),
		                    orientation: 'vertical',
		                    color: '#333'
		                },
		                xField: 'name',
		                yField: ['未完成','已完成']
		            }
		        ]
		    });

		
		var panel =Ext.create('Ext.panel.Panel',{
			autoScroll: true,
			layout:'column',
			region: 'center',
			bodyStyle:{
				backgroundColor:'#DBF2EF'
			},
			defaults: {
				height: 280,
				border:true,
				'margin':'5 0 0 7'
			},
			items:[{
				columnWidth: .5,
				id:'panel_Kshzs_id',
//				title:"输电专业",
				tpl:new Ext.Template([
                  '<div style="float: left; margin-left: 10px;width: 100%;font-style:normal;font-size: 15;">'+
	              		'<div style="width: 20%;float: left;margin-top: 13%; ">                                                                     '+
	            		'</div>                                                                                                     '+
	            	  '<div style="margin-top: 15%;float: left;width: 80%;line-height:1.7;">'+
	            		'<div style="width: 50%;float: left;">                                                                      '+
	            		'	<ul style="list-style-type: none;padding: 0;">                                          '+
	            		'		<li>今日任务总数：{zTodayCount}</li>                                                                              '+
	            		'		<li>本周任务总数：{zWeekCount}</li>                                                                              '+
	            		'		<li>本月任务总数：{zMonthCount}</li>                                                                              '+
	            		'	</ul>                                                                                                   '+
	            		'</div>                                                                                                     '+
	            		'<div style="width: 50%;float: left;">                                                     '+
	            		'	<ul style="list-style-type: none;padding: 0;">                                                          '+
	            		'		<li>今日完成总数：{todayCountOk}</li>                                                                              '+
	            		'		<li>本周完成总数：{weekCountOk}</li>                                                                              '+
	            		'		<li>本月完成总数：{monthCountOk}</li>																				'+
	            		'	</ul>				'+
	            		'</div>'+
            	'</div>'	
            		])
			},{
				xtype:'panel',
				columnWidth: .5,
				title:'月任务',
				layout: {
				    type: 'hbox',
				    align: 'middle ',
				    pack: 'center'
				},
				items:chartBing
			},{
				xtype:'panel',
				columnWidth: 1,
				title:'完成数',
				layout: {
				    type: 'hbox',
				    align: 'middle',
				    pack: 'center'
				},
				items:chartZhuZhuang
			}
		   ]
		});
		
		var menutree =  Ext.create('Ext.tree.Panel',{
			rootVisible: false,
			border: true,
			singleExpand: true,
			region: 'west',
			width: 190,
			id:"kshzs_tree_id",
			expanded: true, 
			store: Ext.create('Ext.data.TreeStore', {
		        proxy: {
		            type: 'ajax',
		            url: 'sjfx/KshzsAction/getVtree.do'
		        },
		        root: {
		        	expanded: true,  
		            id: '0'
		        }
		    }),
			listeners:{
				select:function(r,c){
					me.updatePanel(c.raw.pid);
					chartBingStore.load({
						params:{
							jcBdzId: c.raw.pid
						}
					});
					chartZhuZhuangStore.load({
						params:{
							jcBdzId: c.raw.pid
						}
					});
//					chartBing.update({
//						jcBdzId: c.raw.pid
//					});
//					chartZhuZhuang.update({
//						jcBdzId: c.raw.pid
//					});
				}
			}
		});


		me.items = [menutree,panel];

		me.callParent();
	},
	updatePanel:function(jcBdzId){
		 Ext.Ajax.request({
             url: 'sjfx/KshzsAction/getCountByWorksy.do',
             params:{
            	 jcBdzId:jcBdzId
             },
             success: function (response, options) {
            	 var data = Ext.decode(response.responseText);
         	     Ext.getCmp("panel_Kshzs_id").update(data);
             }
         });
	}
});
